import TodoAdd from './components/TodoAdd'
import TodoFooter from './components/TodoFooter'
import MainSection from './components/MainSection'
import TodoContext from './TodoContext'
import useTodos from './useTodos'
// 导入todos样式
import './App.css'

const initialState = [{ id: 1, text: '吃饭', done: false }]

const App = () => {
  const { todos, onAdd, onDelete, onToggle } = useTodos(initialState)
  return (
    <TodoContext.Provider
      value={{
        todos,
        onDeleteTodo: onDelete,
        onToggleTodo: onToggle
      }}
    >
      <section className='todoapp'>
        {/* 添加任务 */}
        <TodoAdd onAddTodo={onAdd} />
        {/* 改造的地方 */}
        <MainSection></MainSection>
        {/* footer 组件 */}
        <TodoFooter />
      </section>
    </TodoContext.Provider>
  )
}

export default App
